<template>
	<view class="page-body">
		<!-- 页面内容开始 -->

		<!-- 表格搜索组件开始 -->
		<vk-data-table-query v-model="queryForm1.formData" :columns="queryForm1.columns" @search="search">
		</vk-data-table-query>
		<!-- 表格搜索组件结束 -->

		<!-- 自定义按钮区域开始 -->
		<view>
			<el-row>
				<el-button type="success" size="small" icon="vk-icon-sound" @click="addBtn">发送消息</el-button>
				<!-- 批量操作 -->
				<el-dropdown v-if="table1.multipleSelection" :split-button="false" trigger="click" @command="batchBtn">
					<el-button type="danger" size="small" style="margin-left: 20rpx;"
						:disabled="table1.multipleSelection.length === 0">
						批量操作<i class="el-icon-arrow-down el-icon--right"></i>
					</el-button>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item :command="1">批量删除</el-dropdown-item>
						<!-- <el-dropdown-item :command="2">批量发送</el-dropdown-item> -->
					</el-dropdown-menu>
				</el-dropdown>
			</el-row>
		</view>
		<!-- 自定义按钮区域结束 -->

		<!-- 表格组件开始 -->
		<vk-data-table ref="table1" :action="table1.action" :columns="table1.columns" :query-form-param="queryForm1"
			:right-btns="['detail_auto','delete']" :selection="true" :selectable="table1.selectable" :row-no="true"
			:pagination="true" @update="updateBtn" @delete="deleteBtn" @current-change="currentChange"
			@selection-change="selectionChange">
		</vk-data-table>
		<!-- 表格组件结束 -->

		<!-- 添加或编辑的弹窗开始 -->
		<vk-data-dialog v-model="form1.props.show" :title="form1.props.title" width="500px"
			:close-on-click-modal="false">
			<el-tag type="danger">特别注意：提供示例的请按照示例格式填写，否则会发送失败</el-tag>
			<view v-if="queryForm1.formData.msgType=='zjgx'">
				<el-input placeholder="快手端-追剧更新" :disabled="true"><template slot="prepend">消息类型：</template>
				</el-input>
		
				<el-input v-model="form1.data.thing1" placeholder="如:西游记"><template slot="prepend">剧集标题：</template>
				</el-input>
		
				<el-input v-model="form1.data.thing2" placeholder="如:更新99集"><template slot="prepend">更新集数：</template>
				</el-input>
		
				<text style="margin-left: 30px;border: 2rem;">更新时间：</text>
				<el-date-picker v-model="form1.data.thing3" type="datetime" placeholder="选择日期时间" align="right"
					format="yyyy年MM月dd日" value-format="yyyy年MM月dd日"></el-date-picker>
			</view>
		
			<view v-if="queryForm1.formData.msgType=='qdtx'">
				<el-input placeholder="快手端-签到提醒" :disabled="true"><template slot="prepend">消息类型：</template>
				</el-input>
				
				<el-input v-model="form1.data.thing1" placeholder="如:国庆签到"><template slot="prepend">签到名称：</template>
				</el-input>
				
				<el-input v-model="form1.data.thing2" placeholder="如:国庆期间签到送双倍积分"><template
						slot="prepend">可领福利：</template>
				</el-input>
				
				<el-input v-model="form1.data.thing3" placeholder="请输入温馨提醒"><template slot="prepend">温馨提示：</template>
				</el-input>

			</view>
		
			<view v-if="queryForm1.formData.msgType=='rbxj'">
				<el-input placeholder="快手端-热播新剧" :disabled="true"><template slot="prepend">消息类型：</template>
				</el-input>
				
				<el-input v-model="form1.data.thing1" placeholder="如:西游记"><template slot="prepend">热播新剧：</template>
				</el-input>
		
				<text style="margin-left: 30px;border: 2rem;">上线时间：</text>
				<el-date-picker v-model="form1.data.thing2" type="datetime" placeholder="选择日期时间" align="right"
					format="yyyy年MM月dd日" value-format="yyyy年MM月dd日"></el-date-picker>
			</view>
		
			<view style="display: flex;justify-content: right;margin-top: 30px;margin-bottom: 15px;">
				<!-- <el-button type="success" @click="">发送全部</el-button> -->
				<el-button type="primary" @click="send">批量发送</el-button>
			</view>
		
		</vk-data-dialog>
		<!-- 添加或编辑的弹窗结束 -->

		<!-- 页面内容结束 -->
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk = uni.vk; // vk实例
	var originalForms = {}; // 表单初始化数据

	export default {
		data() {
			// 页面数据变量
			return {
				// 页面是否请求中或加载中
				loading: false,
				// init请求返回的数据
				data: {

				},
				// 表格相关开始 -----------------------------------------------------------
				table1: {
					selectable: (row, index) => {
						// 返回true,代表可以多选,返回false代表该行的多选框禁用。
						if (row.is_send) {
							// return false;正常情况下已发送的返回false，但是测试全部返回true
							return true;
						} else {
							return true;
						}
					},
					// 表格数据请求地址
					action: "admin/pages/kh/dyxxgl/ksdyxx/getList",
					// 表格字段显示规则
					columns: [{
							"key": "user_id",
							"title": "用户ID",
							"type": "text",
							"width": 250
						},
						{
							"key": "tv_name",
							"title": "电视剧名称",
							"type": "text"
						},
						{
							key: "msgType",
							title: "消息类型",
							type: "tag",
							data: [{
									value: "qdtx",
									label: "签到提醒",
									tagType: "warning"
								},
								{
									value: "rbxj",
									label: "热播新剧",
									tagType: "warning"
								},
								{
									value: "zjgx",
									label: "追剧更新",
									tagType: "warning"
								}
							]
						},
						{
							key: "is_send",
							title: "是否已发送",
							type: "tag",
							data: [{
									value: true,
									label: "已发送",
									tagType: "success"
								},
								{
									value: false,
									label: "未发送"
								},
							]
						},
						{
							"key": "platform",
							"title": "平台",
							"type": "tag",
							"sortable": "custom",
							data: [{
								value: "kuaishou",
								label: "快手",
								tagType: "error"
							}]
						},
						{
							"key": "_add_time",
							"title": "记录时间",
							"type": "time",
							"width": 200
						}
					],
					// 多选框选中的值
					multipleSelection: [],
					// 当前高亮的记录
					selectItem: ""
				},
				// 表格相关结束 -----------------------------------------------------------
				// 表单相关开始 -----------------------------------------------------------
				// 查询表单请求数据
				queryForm1: {
					// 查询表单数据源，可在此设置默认值
					formData: {
						platform: "kuaishou"
					},
					// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
					columns: [{
							"key": "user_id",
							"title": "用户ID",
							"type": "text",
							"width": 200,
							"mode": "="
						},
						//{"key":"tv_name","title":"电视剧名称","type":"text","width":200,"mode":"="},
						{
							key: "msgType",
							title: "消息类型",
							type: "select",
							data: [{
									value: "qdtx",
									label: "签到提醒",
									tagType: "warning"
								},
								{
									value: "rbxj",
									label: "热播新剧",
									tagType: "warning"
								},
								{
									value: "zjgx",
									label: "追剧更新",
									tagType: "warning"
								}
							],
							"mode": "="
						},
						{
							key: "is_send",
							title: "是否已发送",
							type: "select",
							data: [{
									value: true,
									label: "已发送"
								},
								{
									value: false,
									label: "未发送"
								},
							],
							"mode": "="
						},
						{
							key: "platform",
							title: "平台",
							type: "select",
							disabled: true,
							data: [{
								value: "kuaishou",
								label: "快手"
							}, ],
							"mode": "="
						},
					]
				},
				form1: {
					// 表单请求数据，此处可以设置默认值
					data: {

					},
					// 表单属性
					props: {
						// 表单请求地址
						action: "",
						// 表单字段显示规则
						columns: [{
								"key": "tv_name",
								"title": "电视剧名称",
								"type": "text",
								"width": 200
							},
							{
								"key": "msgType",
								"title": "消息类型",
								"type": "text",
								"width": 200
							}
						],
						// 表单验证规则
						rules: {

						},
						// add 代表添加 update 代表修改
						formType: "",
						// 是否显示表单的弹窗
						show: false
					}
				},
				// 其他弹窗表单
				formDatas: {},
				// 表单相关结束 -----------------------------------------------------------
			};
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.options = options;
			that.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			// if(vk.vuex.get('$user.userInfo.role[0]')!="admin"){
			// 	vk.navigateToLogin();
			// }
		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				originalForms["form1"] = vk.pubfn.copyObject(that.form1);
			},
			// 页面跳转
			pageTo(path) {
				vk.navigateTo(path);
			},
			// 表单重置
			resetForm() {
				vk.pubfn.resetForm(originalForms, that);
			},
			// 搜索
			search() {
				that.$refs.table1.search();
			},
			// 刷新
			refresh() {
				that.$refs.table1.refresh();
			},
			// 获取当前选中的行的数据
			getCurrentRow() {
				return that.$refs.table1.getCurrentRow();
			},
			// 监听 - 行的选中高亮事件
			currentChange(val) {
				that.table1.selectItem = val;
			},
			// 当选择项发生变化时会触发该事件
			selectionChange(list) {
				that.table1.multipleSelection = list;
			},
			// 显示添加页面
			addBtn() {
				let msgType = this.queryForm1.formData.msgType || 0
				console.log("msgType=", msgType);
				if (msgType == 0) {
					// vk.alert('请先筛选消息类型');
					this.$alert('请先选择位于页面上方的【消息类型】', '错误提示');
					return;
				}
				that.resetForm();
				that.form1.props.title = '发送快手订阅消息';
				that.form1.props.show = true;
			},
			send() {
				if (!this.form1.data.thing1 || !this.form1.data.thing2) {
					this.$alert('消息模板内容不能为空，请认真填写', '错误提示');
					return;
				}
				if (this.queryForm1.formData.msgType == "zjgx" && !this.form1.data.thing3) {
					this.$alert('消息模板内容不能为空，请认真填写', '错误提示');
					return;
				}
				if (this.queryForm1.formData.msgType == "qdtx" && !this.form1.data.thing3) {
					this.$alert('消息模板内容不能为空，请认真填写', '错误提示');
					return;
				}
				vk.callFunction({
					url: 'admin/pages/kh/dyxxgl/ksdyxx/ksbatchsend',
					title: '请求中...',
					data: {
						msgs: this.table1.multipleSelection,
						things: this.form1.data
					},
					success: (data) => {
						console.log("执行完成");
						this.refresh()
					}
				});
			},
			// 显示修改页面
			updateBtn({
				item
			}) {
				that.form1.props.action = 'admin/pages/kh/dyxxgl/ksdyxx/update';
				that.form1.props.formType = 'update';
				that.form1.props.title = '编辑';
				that.form1.props.show = true;
				that.form1.data = item;
			},
			// 删除按钮
			deleteBtn({
				item,
				deleteFn
			}) {
				deleteFn({
					action: "admin/pages/kh/dyxxgl/ksdyxx/delete",
					data: {
						_id: item._id
					},
				});
			},
			// 监听 - 批量操作的按钮点击事件
			batchBtn(index) {
				switch (index) {
					case 1:
						//批量删除
						console.log(this._data.table1.multipleSelection)
						vk.callFunction({
							url: 'admin/pages/kh/dyxxgl/ksdyxx/batch',
							title: '请求中...',
							data: {
								msgs: this._data.table1.multipleSelection
							},
							success: (data) => {
								console.log("执行完成");
								this.refresh()
							}
						});
						break;
					default:
						break;
				}
			}
		},
		// 监听属性
		watch: {

		},
		// 过滤器
		filters: {

		},
		// 计算属性
		computed: {

		}
	};
</script>
<style lang="scss" scoped>
	.page-body {}
</style>
